<script lang="ts">
	import { menus, isSideBarOpen } from '$store/menus';

  const sideBarShow = 'translate-x-full', sideBarHidden = '-translate-x-full'
  const closeSidebar = () => {
    console.warn("closeSidebar...")
    isSideBarOpen.set(false)
  }
  const clickMenu = () => {
    console.warn("clickMenu...")
  }
</script>

<div class="absolute -left-full transform transition duration-700 ease-in-out w-full top-0 grid grid-cols-4 h-full bg-gray-500 opacity-95 md:hidden {$isSideBarOpen ? sideBarShow : sideBarHidden}" on:click="{closeSidebar}">
  <div class="col-span-3 bg-gray-900 pt-8">
    <aside class="flex flex-col">
      {#each $menus as item}
        <section
          class="relative flex  w-100 h-12 pl-4 {item.active
            ? 'selected'
            : 'unselected'}"
            on:click|stopPropagation="{clickMenu}"
        >
          <a class="flex justify-center items-center h-full text-xl text-white" href={item.href}>
            <em class="iconfont {item.icon} mr-3 w-6"></em>
            {item.title}</a>
        </section>
      {/each}
    </aside>
  </div>
  <div class="flex mt-2 justify-center">
    <em class="iconfont icon-close text-2xl" />
  </div>
</div>
